<template>
  <div class="wrapper">
    <common-header :content="shopTitle"></common-header>
    <van-loading class="v-loading"
                 size="30px"
                 color="white"
                 v-show="loading" />
    <common-scroll class="scroll"
                   ref="scroll">
      <div class="scroll-content">
        <!-- <common-address-info></common-address-info> -->
        <div class="no-empty"
             v-if="list.length">
          <common-product-list :list="list"
                               :isDetele="true"
                               @changeNum="handleChangeNum"></common-product-list>
          <!-- <common-remark></common-remark>
          <common-pay></common-pay>
          <common-protocol @protocol="handleProtocol"></common-protocol> -->
        </div>
        <div class="empty"
             v-show="!list.length">购物车内空空如也</div>
      </div>
    </common-scroll>
    <div class="settle-accounts">
      <div class="money">
        <div class="title">总金额</div>
        <div class="money-content">￥{{changePrice}}.00</div>
        <div class="freight">免运费</div>
      </div>
      <button class="btn"
              @click="handleSubmit">结算</button>
    </div>
    <keep-alive>
      <router-view v-if="$route.meta.keepAlive"></router-view>
    </keep-alive>
    <router-view v-if="!$route.meta.keepAlive"></router-view>
    <tab-bar></tab-bar>
  </div>
</template>

<script>
// @ is an alias to /src
import tabBar from 'common/tab/tab'
import CommonHeader from 'common/header/header'
// import CommonAddressInfo from 'common/addressInfo/info'
import CommonProductList from 'common/productList/list'
import commonScroll from 'common/scroll/scroll'
// import CommonRemark from 'common/remark/remark'
// import CommonPay from 'common/pay/pay'
// import CommonSettle from 'common/settleAccounts/settleAccounts'
// import CommonProtocol from 'common/pay/protocol'
export default {
  name: 'shop',
  components: {
    tabBar,
    CommonHeader,
    // CommonAddressInfo,
    CommonProductList,
    commonScroll
    // CommonRemark,
    // CommonPay,
    // CommonSettle
    // CommonProtocol
  },
  data () {
    return {
      shopTitle: '购物车',
      isEmpty: false,
      list: [],
      loading: true,
      newList: [],
      changePrice: 0
    }
  },
  created () {
    this.getInfo()
  },
  methods: {
    // 免责协议
    handleProtocol (isSelect) {
      console.log(isSelect)
    },
    getInfo () {
      this.$api.shop.list()
        .then(this.getInfoSucc)
        .catch((e) => {
          this.$errorTip()
          this.loading = false
        })
    },
    getInfoSucc (res) {
      res = res.data
      if (res.code === this.$api.CODE_OK && res.data) {
        const data = res.data
        this.list = data.lists
        this.loading = false
      }
    },
    handleSubmit () {
      if (this.changePrice === 0) {
        this.$tip('购物车空空如也')
        return false
      }
      this.postInfo()
    },
    postInfo () {
      const list = this.list
      this.$api.shop.changeInfo({ list })
        .then(this.postInfoSucc)
        .catch((e) => {
          this.$errorTip()
        })
    },
    postInfoSucc (res) {
      res = res.data
      if (res.code === this.$api.CODE_OK) {
        this.$router.push({
          path: '/shop/settle'
        })
      } else if (res.code === this.$api.CODE_ERR) {
        this.$errorTip()
      }
    },
    handleChangeNum (list) {
      let value = 0
      list.map((item) => {
        value += item.cart_num * Number(item.goods_price)
      })
      this.changePrice = value
      this.newList = list
    },
    getPrice () {
      let value = 0
      this.list.map((item) => {
        value += item.cart_num * Number(item.goods_price)
      })
      this.changePrice = value
      this.newList = this.list
    }
  },
  watch: {
    list (list) {
      this.getPrice()
    }
  }
}
</script>
<style lang="stylus" scoped>
@import '~stylus/variable.styl'
@import '~stylus/mixins.styl'

.wrapper
  initPosition()
  background-color $space

  .scroll
    top 108px
    bottom 208px
    padding()

    .scroll-content
      padding-bottom 10px
      box-sizing border-box

  .settle
    bottom 110px

  .no-empty
    width 100%

  .empty
    font-size $address_name
    font-weight 400
    color $original_price
    margin-top 177px
    width 100%
    text-align center

.settle-accounts
  width 100%
  position fixed
  bottom 110px
  left 0
  height 98px
  background $common_bgc
  display flex

  .money
    flex 1
    display flex
    align-items center
    height 100%
    justify-content center

    .title
      font-size $address_name
      font-weight 400
      color $footer_bgc

    .money-content, .freight
      font-size $address_name
      font-weight 400
      color $tab_active

    .freight
      font-size $delete
      margin-left 10px

  .btn
    width 286px
    height 98px
    background linear-gradient(-18deg, rgba(255, 87, 34, 1), rgba(255, 152, 0, 1))
    font-size $back_fz
    font-weight 400
    color $common_bgc
    text-shadow 0px 2px 2px rgba(5, 5, 5, 0.14)
    border none

.v-loading
  position fixed
  top 50%
  left 50%
  transform translate(-50%, -50%)
  z-index 100
  padding-left 10px
  padding-right 10px
  padding-top 10px
  padding-bottom 10px
  border-radius 3px
  background-color rgba(0, 0, 0, 0.5)
</style>
